<template>
	<view class="quesStar" @click="toHomePage">
		<image :src="starItemOne.avatar || 'https://image.alhelp.net/uploads/20231104/4d491857ac50d21ebbcb25ff5bc254f8.png'" mode="widthFix"></image>
		<view class="font14 bold hiddenOneline starName">{{starItemOne.nickName || '匿名用户'}}</view>
		<view class="delete-icon">×</view>
		<view class="colorBlue font12 circleBox" v-if="circle=='school'">
			<view class="circleName" v-if="starItemOne.isSchoolGlobal">全局</view>
			<view class="flex alignCenter justConAround flexWrap" v-if="(!starItemOne.isSchoolGlobal && starItemOne.schoolTitles)">
				<template v-for="(item,index) in starItemOne.schoolTitles">
					<view class="" :key="index">{{item}}</view>
				</template>
			</view>
		</view>
		<view class="colorBlue font12 circleBox" v-if="circle=='major'">
			<view class="" v-if="starItemOne.isSubjectGlobal">全局</view>
			<view class="flex alignCenter justConAround flexWrap" v-if="!starItemOne.isSubjectGlobal && starItemOne.subjectTitles">
				<template v-for="(item,index) in starItemOne.subjectTitles">
					<view class="" :key="index" >{{item}}</view>
				</template>
			</view>
		</view>
		<view class="focusStyle" v-if="(userId!=starItemOne.userId)" @click.stop="focusClick" :class="(starItemOne.isLikedUser?'interest-hidden':'interest-show')"><text class="focusMargin">{{starItemOne.isLikedUser?'-':'+'}}</text> {{starItemOne.isLikedUser?'取关':'关注'}}</view>
	</view>
</template>

<script>
	import { focusUser } from "@/api/index.js"
	export default {
		name:"uni-questar",
		props:{
			circle:{
				type:String,
				default:''
			},
			starItem:{
				type:Object,
				default(){
					return {}
				}
			}
		},
		watch:{
			starItem: {
			    handler(newValue, oldValue) {
					this.starItemOne=newValue
			    },
			    deep: true,
			    immediate: true
			}
		},
		data() {
			return {
				userId:'',
				starItemOne:''
			};
		},
		created() {
			this.userId=uni.getStorageSync('userId')
		},
		methods:{
			toHomePage(){
				uni.navigateTo({
					url:'/pages/mine/homePage/homePage?userId='+this.starItemOne.userId
				})
			},
			focusClick(){
				let param={
					isAdd:!this.starItemOne.isLikedUser,
					fansUserId:this.starItemOne.userId,
					fansUserName:this.starItemOne.nickName,
					fansUserAvatar:this.starItemOne.avatar,
				}
				focusUser(param).then((res)=>{
					if(res.code==100000){
						this.starItemOne.isLikedUser=!this.starItemOne.isLikedUser
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.quesStar{
	text-align: center;
	border:1px dashed $bordercolor;
	background-color: rgba(248, 248, 248, .85) ;
	border-radius: 10rpx;
	padding: 40rpx 50rpx 20rpx;
	box-sizing: border-box;
	position: relative;
	image{
		width: 112rpx;
		height: 112rpx;
		border-radius: 50%;
		display: block;
		margin: 0 auto;
	}
	.delete-icon{
		position: absolute;
		top: 10rpx;
		right: 20rpx;
		font-size: 40rpx;
		font-weight: 700;
		color: #CCCCCC;
	}
	.circleBox{
		margin: 30rpx 0 0;
	}
	.circleName{
		text-align: center;
	}
	.starName{
		margin:20rpx 0 30rpx;
	}
	.focusStyle{
		margin: 30rpx auto 0;
		border: 2rpx solid #D7D7D7;
	}
	.interest-show{
		background-color: #F7DD5E;
	}
	.interest-hidden{
			background-color: rgba(215, 215, 215, .52);
		}
}
</style>